{extend name="public:base"}
{block name='css'}
{/block}

{block name='body'}
<div class="panel panel-right panel-cover">
    <p class="close-panel"><a class="panel-close" href="#"><i class="iconfont icon-guanbi"></i></a></p>

    <div class="class-panel-m">
        {foreach name="list" item="li" key='key'}
        <div class="t">{$li.title}</div>
            <div class="m">
                {notempty name="li.list"}
            {foreach name="li.list" item="ll"}
            <a href="javascript:;" onclick="selectCateGoods(this, {$ll.id});" data-id="{$ll.id}" class="on js-cate">{$ll.title}</a>
            {/foreach}
                {/notempty}
            </div>
        {/foreach}
    </div>
</div>

<div class="view view-main white-navbar white-page white-toolbar">
    <div data-name="home" class="page js-page" data-handle="1">

        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="{$my_prev_url|default='/'}" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span class="js-title">商品列表</span></div>
                <div class="right">
                    <a class="top-right-class panel-open" data-panel="right"><i class="iconfont icon-icon-"></i></a>
                </div>
            </div>
        </div>

        <div class="page-content infinite-scroll-content">

            <div class="me-order goods-t-sta">
                <div class="m" style="min-width:100%;">
                    <a class="on external js-order" data-order="0">综合</a>
                    <a class="external js-order" data-order="1">销量</a>
                    <a class="external js-order" data-order="2">新品</a>
                    <a class="external js-order" data-order="3" data-desc="1">价格</a>
                </div>
            </div>

            <div class="bakcground-10"></div>

            <div class="home-goods-ul" data-cate_id="{:input('cate_id')}">
            </div>

            {include file='public:loading' /}
        </div>

        {include file='public:tab' /}
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript">
    $(function(){
        $('.class-l ul li').click(function(){
            $('.class-l ul li').removeClass('on');
            $('.js-sons').hide();
            $(this).addClass('on');
            $('.js-sons-'+$(this).attr('classid')).show();
        });
        $('.class-l ul li').eq(0).click();
        //排序
        $('.js-order').click(function(){
            $('.home-goods-ul').html('');
            $('.no-more').hide();
            $('.no-data').hide();
            $('.js-order').removeClass('on');
            $(this).addClass('on');
            getGoodsList($('.home-goods-ul').attr('data-cate_id'), $(this).attr('data-order'));
        });
        if ($('.home-goods-ul').attr('data-cate_id') > 0) {
            $('.js-cate').each(function (i, n) {
                if ($(n).attr('data-id') == $('.home-goods-ul').attr('data-cate_id')) {
                    $(n).click();
                    return false;
                }
            });
        } else {
            getGoodsList($('.home-goods-ul').attr('data-cate_id'));
        }
    });
    //触发无限滚动
    $$('.infinite-scroll-content').on('infinite', function () {
        getGoodsList($('.home-goods-ul').attr('data-cate_id'), $('.js-order.on').attr('data-order'));
    });

    //分类
    function selectCateGoods(self, cate_id) {
        $('.js-title').text($(self).text());
        $('.js-cate').removeClass('on');
        $(self).addClass('on');
        $('.home-goods-ul').attr('data-cate_id', cate_id);
        $('.icon-guanbi').click();
        $('.js-order').eq(0).click();
    }
</script>
{/block}